<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <% include ../../ejs/_meta.ejs %>
    <title>快速动力系统跑鞋</title>
    <% include ../../ejs/_css.ejs %>
    <link rel="stylesheet" type="text/css" href="../../css/goods/detail.css" inline>
</head>

<body class="body-bg" ontouchstart>
<div class="m-page">
    <header class="m-navbar">
        <a href="javascript:;" class="n-back"></a>
        <div class="n-title">快速动力系统跑鞋</div>
        <div class="n-btns">
            <!-- 关注 -->
            <a href="javascript:;" class="n-btn icon-collect j-collect"></a>
            <!-- 分享 -->
            <a href="javascript:;" class="n-btn icon-share j-share"></a>
        </div>
    </header>
    <section class="m-content">
        <div class="m-video">
            <div class="v-cover">
                <img class="v-poster" src="../../img/video.png" alt="">
                <div class="v-btn">
                    <i class="icon-play j-play" data-src="http://www.zjsoar.com/layuicms/page/login/login.mp4"></i>
                </div>
            </div>
            <!--
                1.ios7+支持自动播放
                2.支持Airplay的设备（如：音箱、Apple TV)播放
                  x-webkit-airplay="true"
                3.播放视频不全屏
                  webkit-playsinline="true"
            -->
            <video class="v-player" id="media" controls preload poster="../../img/video.png">
                <source type="video/mp4" src="http://www.zjsoar.com/layuicms/page/login/login.mp4" type="video/mp4">
            </video>
        </div>

        <div class="m-det">
            <div class="det-tle">VDENZ快速动力系统跑鞋</div>
            <div class="det-design">
                <div class="d-hg">
                    <img src="../../img/headimg.jpg" alt="">
                </div>
                <span class="d-name">发起人：Jack</span>
                <span class="d-flag">设计师</span>
            </div>
            <div class="det-con">这款Swift Run运动鞋，融合日常款式和典雅运动风格，胜任长期日常穿着。基于adidas传统跑步鞋风格，注入创新元素。这款女子跑步鞋，采用袜套式弹力针织鞋面打造，有效支撑，贴合舒适。缀浮面三条纹和刺绣细节，低调有型。</div>
            <div data-page="goods/details.html?id=1" class="det-see">查看全部详情&nbsp;&nbsp;&gt;</div>
            <div class="m-progress">
                <div class="m-progress-bar">
                    <div class="m-progress-inner-bar js_progress" style="width: 80%;"></div>
                </div>
            </div>
            <div class="det-infos">
                <div class="det-info">
                    <div class="info-num">&yen;118,590</div>
                    <div class="info-tle">目标金额 &yen;200,000</div>
                </div>
                <div class="det-info">
                    <div class="info-num">1120</div>
                    <div class="info-tle">已支持人数</div>
                </div>
                <div class="det-info">
                    <div class="info-num">8</div>
                    <div class="info-tle">剩余天数</div>
                </div>
            </div>
        </div>

        <div class="m-bars">
            <div data-page="goods/comment.html?id=1" class="m-bar selected underline">
                <span class="bar-name">项目评论</span>
                <span class="badge on">222</span>
            </div>
            <div data-page="goods/process.html?id=1" class="m-bar selected">
                <span class="bar-name">项目进展</span>
                <span class="badge on">5</span>
            </div>
        </div>

        <div class="m-tle" id="anchor">您可以通过以下方式支持这个项目</div>
        <div class="m-block">
            <div class="b-item">
                <!-- <div class="i-status">已支持</div> -->
                <div class="i-yen"><label>&yen;</label>1</div>
                <div class="i-tle">"不错不错，支持一下~~"</div>
                <div class="i-con">
                    获得被抽取维幸运用户的机会，每满418位支持者选取1位幸运用户，不满足时也抽取1位。<br/>
                    幸运用户将会获得价值599元的ENERGIZER专业跑鞋1双<br/>
                    幸运用户将由维町官方抽取，抽奖规则及中奖者名单将在项目评论区
                </div>
                <div class="i-tip">剩余 0 份，2802人已支持</div>
                <div class="i-info">
                    预计回报时间：项目众筹成功后30天内
                    <span class="i-yf">免运费</span>
                </div>
                <div data-page="goods/address.html?id=1" class="m-btn">选择此回报</div>
            </div>
            <div class="b-item">
                <div class="i-status">已抢光</div>
                <div class="i-yen"><label>&yen;</label>399</div>
                <div class="i-tle">"我看好你哦~~"</div>
                <div class="i-con">
                    获得价值599元的ENERGIZER专业跑鞋1双<br/>
                    基础配色（经典黑白配）
                </div>
                <div class="i-tip">剩余 0 份，2802人已支持</div>
                <div class="i-info">
                    预计回报时间：项目众筹成功后30天内
                    <span class="i-yf">免运费</span>
                </div>
            </div>
            <div class="b-item">
                <div class="i-yen"><label>&yen;</label>499</div>
                <div class="i-tle">"不错不错，支持一下~~"</div>
                <div class="i-con">
                    获得价值599元的ENERGIZER专业跑鞋1双（可自选配色定制方案，自选流行符号），送功能T + 运动腰包 + 运动袜
                </div>
                <ul class="i-ul">
                    <li class="underline">可选定制内容</li>
                    <li class="underline">配色定制方案</li>
                    <li class="underline">流行元素符号</li>
                    <li class="underline">元素展现位置</li>
                </ul>
                <div class="i-tip">剩余 0 份，2802人已支持</div>
                <div class="i-info">
                    <span>预计回报时间：项目众筹成功后30天内</span>
                    <span class="i-yf">免运费</span>
                </div>
                <div data-page="goods/address.html?id=2" class="m-btn">选择此回报</div>
            </div>
        </div>
    </section>

    <div class="m-popup">
        <img class="share-img" src="../../img/share.png" alt="">
    </div>
</div>
</body>

<%-include("../../ejs/_js.ejs", {env: env}) %>
<script type="text/javascript">
$(function () {
    //- 产品ID
    var _id = utils.param('id');
    //- 锚点位置
    var _anchor = utils.param('anchor');

    //- 关注
    $(".j-collect").m_touch(function () {
        var $this = $(this);
        var on = $this.hasClass('on');
        // var url = on ? '取消关注url' : '关注url';
        $.showLoading({text: on ? '取消中...' : '正在关注...'});
        setTimeout(function () {
            $.hideLoading();

            $this.toggleClass('on');
            $.toast(on ? "已取消" : "关注成功")
        }, 1000);
    });

    $(".det-see, .m-bar, .m-btn").m_touch(function() {
        jump.view($(this).data("page"));
    })

    //- 分享
    var $popup = $(".m-popup");
    $(".j-share").m_touch(function () {
         $popup.m_popup();
    });

    //- 视频播放 Start
    var $media = $("#media");

    //- 播放按钮
    $(".j-play").m_touch(function () {
        if (!$media.attr('autoplay')) $media.attr('autoplay', true);
        $media.show().siblings().hide().end().load();
        // $media.load();
    });

    //- 视频暂停播放 / 播放结束
    $media.on('pause', function () {
        $(this).hide().siblings().show();
    }).on('end', function () {
        $(this).hide().siblings().show();
    });

    //- 自动定位到 #anchor 锚点位置
    if (_anchor) {
        setTimeout(function(){
            $(".m-content").animate({scrollTop: $("#anchor").offset().top}, 550);
        }, 300);
    }

});
</script>

</html>
